<template>
	<div id="loosControl">	
		<div id="map" class="map">
		</div>		
		<!-- <div class="top_info">
			<div class="item" v-for="item in topInfoObjArr" :key="item.index">
				<img class="icon" :src="item.icon"/>
				<div class="content">
					<span class="title">{{item.text}}</span>
					<span><span class="num">{{item.num}}</span><span>{{item.unit}}</span></span>
				</div>
			</div>
		</div> -->
		<div class="bar_right" :key="timer">
			<div class="bar_wrap" v-for="group in mapBarList" :key="group.index">
				<div class="bar_item" v-for="item in group" :key="item.index">
					<div class="left_label">
						<img :src="item.img" alt="" class="bar_icon">
						<span class="bar_label">{{item.label}}</span>
					</div>
					<div v-if="item.hasSwitch" class="right_opt">
						<span>{{item.num}}</span>
						<el-switch
							v-model="item.switch"
							@change="showswitch(item.switch,item.label)"
							active-value="true"
    						inactive-value="false"
							active-color="rgba(6, 216, 90, 1)"
							inactive-color="rgba(255, 255, 255, 0.2)">
						</el-switch>
					</div>
				</div>
			</div>			
		</div>
		<div class="left_content">
			<!-- 水司当期概况 -->
			<PanelWrap class="ssdqgk_panel" :height="170">
				<div id="chart_ssdqgk"></div>
				<div class="statis_group">
					<div class="statis_item">
						<span class="label">
							当期漏损率
						</span>
						<span class="num">
							20%
						</span>
					</div>
					<div class="statis_item">
						<span class="label">
							产销差率
						</span>
						<span class="num">
							20%
						</span>
					</div>
					<div class="statis_item">
						<span class="label">
							水费回收率
						</span>
						<span class="num">
							20%
						</span>
					</div>
				</div>
			</PanelWrap>
			<!-- 水司漏损率 -->
			<PanelWrap class="sslsl_panel" :height="199">
				<div class="chart" id="chart_sslsl"></div>
			</PanelWrap>
			<!-- 水司产销差 -->
			<PanelWrap class="sscxc_panel" :height="187">
				<div class="chart" id="chart_sscxc"></div>
			</PanelWrap>
			<!-- 当期用水统计 -->
			<PanelWrap class="dqystj_panel" :height="220">
				<div class="chart" id="chart_dqystj1"></div>
				<div class="chart" id="chart_dqystj2"></div>
			</PanelWrap>
		</div>		
		<div class="right_content">
			<!-- 水厂日累积供水量 -->
			<PanelWrap class="drljgsl_panel" :height="182">
				<div class="chart" id="chart_drljgsl"></div>
				<div class="title_chart"><span class="gs_item_t">江南水厂</span><span class="gs_item_t">江北水厂</span></div>
			</PanelWrap>
			<!-- 水厂分时供水量 -->
			<PanelWrap class="fsgsl_panel" :height="242">
				<div class="chart" id="chart_fsgsl"></div>
			</PanelWrap>
			<!-- 夜间最小流量 -->
			<PanelWrap class="yjzxll_panel" :height="220">
				<div class="chart" id="chart_yjzxll"></div>
			</PanelWrap>
			<!-- 爆管记录 -->
			<PanelWrap class="bgjl_panel" :height="215">
				<div class="my_table">
					<div class="list_title">
						<span class="list_item title_type" style="width:120px;overflow: hidden;">级别</span>
						<span class="list_item title_level" style="flex:none;">类型</span>
						<span class="list_item title_status" style="width:120px;">时间</span>
						<span class="list_item title_dt">地点</span>
						<span class="list_item title_dt">状态</span>
					</div>
					<ul class="warning_list">
						<li v-for="(item,index) in bgjlList" :key="index" class="list_row">
							<span class="list_item d_type" style="width:120px;overflow: hidden;">{{item.level}}</span>
							<span class="list_item d_type">{{item.type}}</span>
							<span class="list_item d_level" style="width:120px;">{{item.time}}</span>
							<span class="list_item d_status">{{item.address}}</span>
							<span class="list_item d_dt">{{item.status}}</span>
						</li>
					</ul>
				</div>	
			</PanelWrap>
		</div>
		<div class="selectGW">
			<div class="select_wrap">
				<span class="label">管材：</span>
				<el-select v-model="selectVal_GC" placeholder="">
					<el-option
					v-for="item in options_GW"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="select_wrap">
				<span class="label">管径：</span>
				<el-select v-model="selectval_GJ" placeholder="">
					<el-option
					v-for="item in options_GJ"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</div>
		</div>
        <div class="reFreshLaking" @click="getNewLake">
            <span class="value"> {{ riskRate }}</span>
        </div>
		<!-- <BottomPanel></BottomPanel> -->
	</div>
</template>

<script>
let group561 = require('@/assets/image/mapbar/Group 561.png');
let group731 = require('@/assets/image/mapbar/Group 731.png');
let group1121 = require('@/assets/image/mapbar/Group 1121.png');
let group1122 = require('@/assets/image/mapbar/Group 1122.png');
let group1123 = require('@/assets/image/mapbar/Group 1123.png');
let vector = require('@/assets/image/mapbar/Vector.png');
let vector1 = require('@/assets/image/mapbar/Vector-1.png');
let vector2 = require('@/assets/image/mapbar/Vector-2.png');
let jgIcon = require('@/assets/image/mapbar/jg.png');
let rcsIcon = require('@/assets/image/lossCtrol/top/rcs.png')
let ycsIcon = require('@/assets/image/lossCtrol/top/ycs.png')
let bgIcon = require('@/assets/image/lossCtrol/top/bg.png')
let sbzxlIcon = require('@/assets/image/lossCtrol/top/sbzxl.png')
let img = import('@/assets/image/lossCtrol/top/sbzxl.png')

import PanelWrap from '@/components/panelWrapbk'
import Monitor from '@/components/monitor'
import TopNav from '@/components/TopNav'
import BottomPanel from '@/components/BottomPanel'
export default {
	name: 'loosControl',
	components:{
		// MapContainer
		PanelWrap,
		Monitor,
		TopNav,
		BottomPanel
	},
	data() {
		return {
			mapBarList:[
				// [
				// 	{
				// 		index:1,
				// 		label:'江南水厂',
				// 		num:'',
				// 		img:group1121,
				// 		switch:'true',
				// 		hasSwitch:true
				// 	},
				// 	{
				// 		index:2,
				// 		label:'江北水厂',
				// 		num:'',
				// 		img:group1122,
				// 		switch:'false',
				// 		hasSwitch:true
				// 	}
				// ],
				[
					{
						index:3,
						label:'管线',
						num:2000,
						img:vector2,
						switch:'true',
						hasSwitch:true
					},
                    {
                        index:4,
                        label:'漏损预测',
                        img:require('@/assets/image/mapbar/lsyc.png'),
                        switch:'true',
						hasSwitch:true
                    }
					// {
					// 	index:4,
					// 	label:'消火栓',
					// 	num:188,
					// 	img:vector,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					// {
					// 	index:5,
					// 	label:'阀门',
					// 	num:499,
					// 	img:vector1,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					// {
					// 	index:6,
					// 	label:'水表',
					// 	num:20,
					// 	img:group561,
					// 	switch:false,
					// 	hasSwitch:true
					// }
				],
				// [
				// 	{
				// 		index:9,
				// 		label:'压力监测点',
				// 		num:176,
				// 		img:group1123,
				// 		switch:false,
				// 		hasSwitch:true
				// 	},
				// 	{
				// 		index:11,
				// 		label:'流量监测点',
				// 		num:17,
				// 		img:group731,
				// 		switch:false,
				// 		hasSwitch:true
				// 	},
				// 	{
				// 		index:12,
				// 		label:'井盖',
				// 		num:5,
				// 		img:jgIcon,
				// 		switch:false,
				// 		hasSwitch:true
				// 	}
				// ]
			],
			showMarkerLayer:true,
			timer:'',
			map:null,
			layerGroup:null,
			// polyline_gxArr:[],//管线数据
			mapElementsArray:{},
			config_GJ:{
				200:1,
				300:2,
				400:3,
				600:4
			},
			selectVal_GC:'全部',
			options_GW:[
				{value:'全部',label:'全部'},
				{value:'铸铁',label:'铸铁'},
				{value:'钢',label:'钢'},
				{value:'PE',label:'PE'}
			],
			selectval_GJ:'200',
			options_GJ:[
				{
					value:'200',
					label:'>=200mm'
				},
				{
					value:'300',
					label:'>=300mm'
				},
				{
					value:'400',
					label:'>=400mm'
				},
				{
					value:'600',
					label:'>=600mm'
				}
			],
			date_full:'',
			// date_week:'',
			gjlbist:[],
			timer:'',
			bjlbist:[],
			ycylsjList:[],//远程压力数据
			bgjlList:[],
            overlayGroups_laking:null,//漏损标记组图层
            riskRate:0
		}
	},
	comments: {
	},
	mounted() {
		this.initMap();
		this.$nextTick(() => {
            // this.reFreshLaking();//漏损风险
			this.initChart_ssdqgk();//水司当期概况
			this.initChart_sslsl();//水司漏损率
			this.initChart_sscxc();//水司产销差
			this.initChart_dqystj();//当期用水统计
			this.initChart_fsgsl();//水厂分时供水量
			this.initCharts_yjzxll();//夜间最小流量
			this.getBgjlData();//爆管记录
			this.initChart_scljgsl();//水厂累计供水量
		})
		
	},
	beforeDestroy(){
		this.map.gl.getExtension('WEBGL_lose_context').loseContext() ;
	},
	watch: {
		selectval_GJ(val){
			this.selectPipeLine(this.selectVal_GC,val);
		},
		selectVal_GC(VAL){
			this.selectPipeLine(VAL,this.selectval_GJ);
		}
	},
	methods: {
		initMap() {	
			window._AMapSecurityConfig = {
				securityJsCode:'f942bcd483b14957dd25aa7039f85570',
			}
            this.$AMapLoader.load({
				key: "7ba1c234cc901e5f5bd9f3e2f444abac",             // 申请好的Web端开发者Key，首次调用 load 时必填
				// key:'e43e1003d8b128cad822ef01ae24e4d4',
				version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				Loca:{
					version:'2.0.0'
				}
			}).then((AMap) => {
				this.map = new AMap.Map("map", {  //设置地图容器id
					viewMode: "3D",    //是否为3D地图模式
					zoom: 15,           //初始化地图级别
					center: [105.066476, 28.740807], //初始化地图中心点位置
					mapStyle: 'amap://styles/9eb96389790fbf01cc795d7d86d1baf3',
					// mapStyle: 'amap://styles/d3a59cf36af457e0da4b54722d475763',
					zIndex:10,
					pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
				});
                this.addPipeToMap();		
                this.addLakingForcecast();//添加漏损预测数据		

			}).catch(e => {
				// console.log(e);
			})
		},	
		toggleTopTab(index){
			this.topActiveTab = index;
			//每一次切换都清除一下地图元素
			if(index == 1){
				this.mapBarList = this.mapBarList_yljc;
				this.timer = new Date();
				if(this.mapElementsArray['yl'] && this.mapElementsArray['yl'].length > 0){
					this.mapElementsArray['yl'].forEach(item => {
						item.show();
					})
				}else{
					//添加压力marker
					this.addPressureMarker();
				}
			}else{				
				if(index == 0){
					this.mapBarList = this.mapBarList_init;
				}
				this.mapElementsArray['yl'].forEach(item => {
					item.hide();
				})
			} 
		},
		hideHome(){
			this.topActiveTab = 100;
		},	
		initCharts(){
			var value = 0.75;
			var data = [value];
			var option1 = {
				backgroundColor: '#0F224C',
				title: [
					{
						show:false
					}
				],
				series: [
					{
						//第一个球
						type: 'liquidFill',
						radius: '100%',
						center: ['50%', '50%'],
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#034D61',
									},
									{
										offset: 1,
										color: '#0FEBF4',
									},
								],
								globalCoord: false,
							},
						],
						data: [0.45], // data个数代表波浪数
						backgroundStyle: {
							borderWidth: 1,
							borderColor: '#00f0ff',
							color:{
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 1,
								colorStops: [{
									offset: 0, color: '#011A2B' // 0% 处的颜色
								},
								 {
									offset: 0.8, color: '#00394F' // 100% 处的颜色
								}
								, 
								{
									offset: 1, color: '#00f0ff' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						label: {
							normal: {
								textStyle: {
									fontSize: 18,
									color: '#fff',
								},
							},
						},
						outline: {
							// show: false
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: '#112165',
							},
						},
					}			
				],
			};
			var option2 = {
				backgroundColor: '#0F224C',
				title: [
					{
						// show:true,
						// text:'江北水厂',
						// textStyle:{
						// 	color:'#ffffff'
						// }
					}
				],
				series: [
					{
						//第一个球
						type: 'liquidFill',
						radius: '100%',
						center: ['50%', '50%'],
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#034D61',
									},
									{
										offset: 1,
										color: '#0FEBF4',
									},
								],
								globalCoord: false,
							},
						],
						data: [0.75], // data个数代表波浪数
						backgroundStyle: {
							borderWidth: 1,
							borderColor: '#00f0ff',
							color:{
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 1,
								colorStops: [{
									offset: 0, color: '#011A2B' // 0% 处的颜色
								},
								 {
									offset: 0.8, color: '#00394F' // 100% 处的颜色
								}
								, 
								{
									offset: 1, color: '#00f0ff' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						label: {
							normal: {
								textStyle: {
									fontSize: 18,
									color: '#fff',
								},
							},
						},
						outline: {
							// show: false
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: '#112165',
							},
						},
					}			
				],
			};
			var myChart1 = this.$echarts.init(document.getElementById('liquid1'));
			myChart1.setOption(option1);

			var myChart2 = this.$echarts.init(document.getElementById('liquid2'));
			myChart2.setOption(option2);

		},
		
        addPipeToMap(_time){
			//先清空
			let that = this;
			let time = _time || `${new Date().getHours()}:00`;
			this.$axios.post('http://43.136.137.111:9898/jiangan/pipe/network/pressure/rest',{time:time}).then(res => {
				if(res.status == 200){
					let pipeData = res.data.data	
					let polylineArr = [];
					for (let i = 0; i < pipeData.length; i++) {
						const element = pipeData[i];
						let path = element.coordinates;
						let color = '';
						if(element.pressureValue > 0 && element.pressureValue <= 0.1){
							color = '#12EBF2';
						}else if(element.pressureValue > 0.1 && element.pressureValue <= 0.2){
							color = '#14C111';
						}else if(element.pressureValue > 0.2 && element.pressureValue <= 0.3){
							color = '#0F5CF0';
						}else if(element.pressureValue > 0.3 && element.pressureValue <= 0.4){
							color = '#F08B15';
						}
						var Polyline = new AMap.Polyline({
								path: path,  
								strokeWeight: 6, // 线条宽度，默认为 1
								strokeColor: color, // 线条颜色
								lineJoin: 'round', // 折线拐点连接处样式
								zIndex:1,
								bubble :true,
								strokeWeight :5,
								isOutline:true,
								geodesic:true,
								lineCap:'round'
							});
							polylineArr.push(Polyline)						
					}
					var layerGroup = new AMap.LayerGroup(polylineArr);
					that.pipesLayerGroup = layerGroup;
    				layerGroup.setMap(that.map);
				}
			})	
		},
		// //添加流量计marker
		// addFlowmaterMarker(){
        //     debugger
		// 	let iconNormal = require('@/assets/image/mapbar/liuliangji_normal.png');
		// 	let icoOutline = require('@/assets/image/mapbar/liuliangji_outline.png');
		// 	let iconWarning = require('@/assets/image/mapbar/liuliangji_warning.png');				
		// 	let iconJnsc = require('@/assets/image/mapbar/liuliangji_shuichang.png');		
		// 	//请求
		// 	this.$axios.get('http://43.136.137.111:9898/system/pipe/network/traffic').then(res => {
		// 		let markerArr = [];
		// 		let size = [85,90];
		// 		let offset = [0,25];
		// 		let threshold = 0;
		// 		res.data.forEach(item => {
		// 			let lnglat = [+(item.trafficNode.longitude),+(item.trafficNode.latitude)];
		// 			let iconImgSrc = null;
		// 			threshold = item.threshold;
		// 			if(item.trafficNode.name == '江南水厂'){
		// 				iconImgSrc = iconJnsc;
		// 				size = [180,120]
		// 				// offset = [90,60];
		// 			}else{
		// 				if(!item.value){
		// 					iconImgSrc = icoOutline;
		// 				}else if(threshold == 1){
		// 					iconImgSrc = iconWarning;
		// 				}else if(threshold == 0){
		// 					iconImgSrc = iconNormal;
		// 				}
		// 			}
		// 			let value = (+item.value).toFixed(4) || '';
		// 			// threshold
		// 			var labelMarker = new AMap.LabelMarker({
        //                 position:lnglat,
        //                 opacity: 1,
        //                 zIndex: 5,                        
        //                 icon:{
        //                     size:size,
        //                     image:iconImgSrc,
        //                     imageSize:size
        //                 },            
		// 				text:{
		// 					content:value,
		// 					direction :'top',
		// 					offset:[0,25],
		// 					style:{
		// 						fontSize: 15,
        //     					fillColor: '#fff',
		// 					}
		// 				},
		// 			});				
		// 			// this.map.add(marker);
		// 			// markerArr.push(marker);
		// 			var labelsLayer = new AMap.LabelsLayer({
		// 				collision: true,
		// 			});
		// 			// 将 LabelMarker 实例添加到 LabelsLayer 上
		// 			labelsLayer.add(labelMarker);
		// 			// 将 LabelsLayer 添加到地图上
		// 			this.map.add(labelsLayer);
		// 			markerArr.push(labelsLayer)

		// 			//远程压力数据
		// 			this.ycylsjList.push(item);
		// 		})
		// 		// //添加到组件数据上
		// 		this.mapElementsArray['jcd'] = markerArr;
		// 	})
		// },
        //添加漏损预测
        addLakingForcecast(){
            let that = this;
            this.$axios.get('http://43.136.137.111:9898/jiangan/leakage/model/latest',{}).then(res => {
                if(res.data){
                    that.riskRate = (res.data.riskRate*100).toFixed(2);
                    that.addLakeToMap(res.data.list);
                }
            }).catch((error)=>{
                console.log(error)
            })
        },
        getNewLake(){
            let that = this;
            this.$axios.get('http://43.136.137.111:9898/jiangan/leakage/model/click',{}).then(res => {
                if(res.data){
                    that.riskRate = (res.data.riskRate*100).toFixed(2);
                    that.addLakeToMap(res.data.list);
                }
            }).catch((error)=>{
                console.log(error)
            })
        },
        addLakeToMap(_data){
            let lakingMarkerArray = [];
            _data.forEach(item => {
                let range = item.range * 100;
                var circle = new AMap.Circle({
                    center: new AMap.LngLat(item.coordinate[0], item.coordinate[1]),//圆心位置
                    radius: range,  //半径
                    strokeColor: "#F33",  //线颜色
                    strokeOpacity: 1,  //线透明度
                    strokeWeight: 3,  //线粗细度
                    fillColor: "#ee2200",  //填充颜色
                });
                // that.map.add(circle);
                let textMarker = new AMap.Text({
                    position:new AMap.LngLat(item.coordinate[0], item.coordinate[1]),
                    text:`漏损概率：${item.risk}`,
                    anchor:'top-center',
                    offset:[0,-45]
                })
                lakingMarkerArray.push(textMarker);
                lakingMarkerArray.push(circle);
                textMarker.on('click',(e)=>{
                    let htmlStr = `<div class="infoWindow" v-show="showInfoWindow">
                                    <div class="top">
                                        <span class="title">漏损信息</span>
                                    </div>
                                    <div class="content">
                                        <div class="info">
                                            <ul class="info_decs">
                                                <li>
                                                    <span class="label">漏损概率：</span>
                                                    <span class="val">${item.risk}</span>
                                                </li>
                                                <li>
                                                    <span class="label">覆盖范围：</span>
                                                    <span class="val">${item.range * 1000}m</span>
                                                </li>
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>`;
                const infoWindow = new AMap.InfoWindow({
                    content:htmlStr,
                    offset:[0,-25]
                })
                infoWindow.open(that.map,e.target._position);
                })
            })
            //添加 laskingLayer
            this.overlayGroups_laking  = new AMap.OverlayGroup(lakingMarkerArray);
            this.map.add(this.overlayGroups_laking);
        },
		selectPipeLine(pipe,pipeDiameter){
			this.mapElementsArray['gx'].map(item => {
				if (pipe == '全部'){
					if(item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}else{
					if(item.extData.pipe == pipe && item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}
			})
		},
		hideMarkerLayer(){
			if(!this.showMarkerLayer){
				this.layerGroup.hide();
			}else{
				this.layerGroup.show();
			}
			this.showMarkerLayer = !this.showMarkerLayer;
		},
		checkGcTab(index){
			this.gcActiveTab = index;			
		},
		showswitch(oldVal,label){
			let attrName = '';
			if('管线' == label){
                if(oldVal == 'false'){
                    this.pipesLayerGroup.hide();
                }else{
                    this.pipesLayerGroup.show();
                }			
			}else{
				// if('江南水厂' == label){
				// 	attrName = 'jnsc';
				// }else if('江北水厂' == label){
				// 	attrName = 'jbsc';
				// }else if('江南水厂' == label){
				// 	attrName = 'jnsc';
				// }else if('消火栓' == label){
				// 	attrName = 'xhs';
				// }else if('阀门' == label){
				// 	attrName = 'fm';
				// }else if('水表' == label){
				// 	attrName = 'sb';
				// }else if('压力监测点' == label || '流量检测点' == label){
				// 	attrName = 'jcd';
				// }else if('井盖' == label){
				// 	attrName = 'jg';
				// }else if('排污阀' == label){
				// 	attrName = 'pwf';
				// }
                if('漏损预测' == label){
                    if(oldVal === 'false')
                        this.overlayGroups_laking.hide();
                    if(oldVal !== 'false')
                        this.overlayGroups_laking.show();
                }	    
				// if(oldVal == 'false'){
				// 	this.mapElementsArray[attrName].hide();
				// }else{
				// 	this.mapElementsArray[attrName].show();
				// }		
				
			}
			
		},
		//水司当期概况
		initChart_ssdqgk(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data21').then(res => {
				var myChart = this.$echarts.init(document.getElementById('chart_ssdqgk'));
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					title: {
						show:false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'shadow'
						}
					},
					legend: {
						textStyle:{
							color:'#ffffff'
						},
						top:10,
						right:30,
						itemWidth:10,
						itemHeight:1
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						data:res.data[0].date
					},
					yAxis: {
						type: 'value',
						name:'万吨',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						}
					},
					series: [
						{
							name: res.data[0].name,
							type: 'bar',
							data: res.data[0].value,
							roundCap:true,
							barWidth:4,
							itemStyle:{
								borderWidth:1,
								borderColor:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#0CAFC6' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(123, 205, 252, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								},
								color:'transparent'
							}
						},
						{
							name: res.data[1].name,
							type: 'bar',
							data:  res.data[1].value,
							roundCap:true,
							barWidth:4,
							itemStyle:{
								borderWidth:1,
								borderColor:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(246, 195, 14, 1)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(249, 198, 20, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								},
								color:'transparent'
								// color:{
								// 	type: 'linear',
								// 	x: 0,
								// 	y: 0,
								// 	x2: 0,
								// 	y2: 1,
								// 	colorStops: [{
								// 		offset: 0, color: 'rgba(252, 224, 123, 0.2)' // 0% 处的颜色
								// 	}, {
								// 		offset: 1, color: 'rgba(252, 224, 123, 0)' // 100% 处的颜色
								// 	}],
								// 	global: false // 缺省为 false
								// }
							}
						}
					]
				};
				myChart.setOption(option);				
			})
		},
		//水司漏损率
		initChart_sslsl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data22',{}).then(res => {
				var myChart = this.$echarts.init(document.getElementById('chart_sslsl'));
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis',
						// formatter:'{a0}:{b0} {c0}%<br />{a1}:{b1} {c1}%<br />{a2}:{b2} {c2}%'
					},
					legend: {
						data: ['水司', '江南', '江北'],
						right:10,
						top:10,
						icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: res.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '%'
					},
					series: [
						{
							name: '水司',
							type: 'line',
							stack: 'Total',
							data:res.data[0].value,
							symbol:'none',
						},
						{
							name: '江南',
							type: 'line',
							stack: 'Total',
							data:res.data[1].value,
							symbol:'none'
						},
						{
							name: '江北',
							type: 'line',
							stack: 'Total',
							data: res.data[2].value,
							symbol:'none'
						}
					]
					};
				myChart.setOption(option);
			})
		},
		//水司产销差
		initChart_sscxc(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data23').then(res => {				
				var myChart = this.$echarts.init(document.getElementById('chart_sscxc'));
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					title: {
						show:false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'shadow'
						}
					},
					legend: {
						textStyle:{
							color:'#ffffff'
						},
						top:10,
						right:10,
						itemWidth:10,
						itemHeight:10,
						data:[
							{
								name:  res.data[0].name,
								// 强制设置图形为圆。
								icon: 'rect'	
							},
							{
								name: res.data[1].name,
								// 强制设置图形为圆。
								icon: 'rect'
							},
							{
								name: res.data[2].name,
								icon:'rect',
								itemStyle:{
									color:'rgba(236, 21, 21, 1)'
								}
							}
						]
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						data:res.data[0].date
					},
					yAxis: {
						type: 'value',
						name:'万吨',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						}
					},
					series: [
						{
							name: res.data[0].name,
							type: 'bar',
							data: res.data[0].value,
							roundCap:true,
							barWidth:4,
							itemStyle:{
								color:'rgba(209, 162, 22, 1)'
							}
						},
						{
							name: res.data[1].name,
							type: 'bar',
							data:  res.data[1].value,
							roundCap:true,
							barWidth:4,
							itemStyle:{
								color:'rgba(93, 171, 204, 1)'
							}
						},
						{
							name:  res.data[2].name,
							type: 'line',
							stack: 'Total',
							data:res.data[2].value,
							symbol:'none',
							lineStyle:{
								color:'rgba(236, 21, 21, 1)'
							}
						},
					]
				};
				myChart.setOption(option);				
			})
		},
		//当期用水统计
		initChart_dqystj(){
			let dom = document.getElementById('chart_dqystj1');
				let myChart1 = this.$echarts.init(dom);
				let myChart2 = this.$echarts.init(document.getElementById('chart_dqystj2'));
				let option1 = {
					tooltip: {
						trigger: 'item',
						formatter: '{c}%'
					},
					legend:{
						right:50,
						left:150,
						top:20,
						textStyle:{
							color:'#FFFFFF'
						},
						icon:'roundRect',
						itemWidth:10,
						itemHeight:5,
						formatter: function (name) {
							if('生产水量' == name){
								return  name + ' ' + 24;
							}else if('销售水量' == name){
								return  name  + ' ' + 10;
							}else if('未计量' == name){
								return  name  + ' ' + 12;
							}else if('漏损量' == name){
								return  name + ' ' + 36;
							}else if('未抄表' == name){
								return  name + ' ' + 18;
							}
							
						}
					},				
					series: [						
						{
							type: 'pie',
							radius: ['63%', '66%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							legendHoverLink :false,
							label: {
								show:false
							},
							data: [
								{ value: 100,name:''}
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)'
											];
										return colorList[colors.dataIndex]
									}
								}
							},
						},
						{
							name: 'Access From',
							type: 'pie',
							radius: ['72%', '88%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							// legendHoverLink :false,
							label: {
								show:false,
								textStyle:{
									color:'#FFFFFF',
									
								},
								formatter: '{b}\n\n{c}%'
							},
							data: [
								{ value: 24, name: '生产水量' },
								{ value: 10, name: '销售水量' },
								{ value: 12, name: '未计量' },
								{ value: 36, name: '漏损量' },
								{ value: 18, name: '未抄表' }
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)', 
											'rgba(77, 185, 144, 1)', 
											'rgba(209, 162, 22, 1)',
											'rgba(197, 89, 66, 1)',
											'rgba(93, 171, 205, 1)'
											];
										return colorList[colors.dataIndex]
									},
									borderColor: 'rgba(10, 38, 54, 0.7)',
              						borderWidth: 3,
								}
							},
						},
						{
							type: 'pie',
							radius: ['93%', '95%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							legendHoverLink :false,
							label: {
								show:false
							},
							data: [
								{ value: 100,name:''}
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)'
											];
										return colorList[colors.dataIndex]
									}
								}
							},
						}
					],
					grid:{
						top:'20%'
					}
				};

				let option2 = {
					tooltip: {
						trigger: 'item',
						formatter: '{c}%'
					},
					legend:{
						right:50,
						left:150,
						top:20,
						textStyle:{
							color:'#FFFFFF'
						},
						icon:'roundRect',
						itemWidth:10,
						itemHeight:5,
						formatter: function (name) {
							if('行政、事业用水' == name){
								return  name + ' ' + 12;
							}else if('居民用水' == name){
								return  name  + ' ' + 10;
							}else if('工业用水' == name){
								return  name  + ' ' + 12;
							}else if('特殊用水' == name){
								return  name + ' ' + 36;
							}else if('经营服务用水' == name){
								return  name + ' ' + 18;
							}else if('其他用水' == name){
								return  name + ' ' + 12;
							}
							
						}
					},				
					series: [						
						{
							type: 'pie',
							radius: ['63%', '66%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							legendHoverLink :false,
							label: {
								show:false
							},
							data: [
								{ value: 100,name:''}
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)'
											];
										return colorList[colors.dataIndex]
									}
								}
							},
						},
						{
							name: 'Access From',
							type: 'pie',
							radius: ['72%', '88%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							// legendHoverLink :false,
							label: {
								show:false,
								textStyle:{
									color:'#FFFFFF',
									
								},
								formatter: '{b}\n\n{c}%'
							},
							data: [
								{ value: 12, name: '行政、事业用水' },
								{ value: 10, name: '居民用水' },
								{ value: 12, name: '工业生产用水' },
								{ value: 36, name: '特殊用水' },
								{ value: 18, name: '经营服务用水' },
								{ value: 18, name: '其他用水' }
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)', 
											'rgba(77, 185, 144, 1)', 
											'rgba(209, 162, 22, 1)',
											'rgba(197, 89, 66, 1)',
											'rgba(93, 171, 205, 1)',
											'rgba(20, 92, 171, 1)'
											];
										return colorList[colors.dataIndex]
									},
									borderColor: 'rgba(10, 38, 54, 0.7)',
              						borderWidth: 3,
								}
							},
						},
						{
							type: 'pie',
							radius: ['93%', '95%'],
							center:['15%', '50%'],
							labelLine: {
								length: 20
							},
							legendHoverLink :false,
							label: {
								show:false
							},
							data: [
								{ value: 100,name:''}
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'rgba(129, 165, 188, 1)'
											];
										return colorList[colors.dataIndex]
									}
								}
							},
						}
					],
					grid:{
						top:'20%',
						right:'20%'
					}
				};
				// if (option && typeof option === 'object') {
					myChart1.setOption(option1);
					myChart2.setOption(option2);
				// }

		},
	
		//水厂分时供水量
		initChart_fsgsl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data25',{}).then(res => {
				var myChart = this.$echarts.init(document.getElementById('chart_fsgsl'));
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['江南水厂', '江北水厂'],
						right:10,
						top:10,
						icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: res.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '万吨'
					},
					series: [
						{
							name: '江南水厂',
							type: 'line',
							stack: 'Total',
							data:res.data[0].value,
							symbol:'none',
						},
						{
							name: '江北水厂',
							type: 'line',
							stack: 'Total',
							data:res.data[1].value,
							symbol:'none'
						},
					]
					};
				myChart.setOption(option);
			})
		},
		//夜间最小水量图
		initCharts_yjzxll(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data8',{}).then(res => {
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['城区', '阳春', '康家坝'],
						right:10,
						top:10,
						icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: res.data.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: 'm³',
					},
					series: [
						{
							name: '城区',
							type: 'line',
							stack: 'Total',
							data:res.data.data[0].value,
							symbol:'none'
						},
						{
							name: '阳春',
							type: 'line',
							stack: 'Total',
							data:res.data.data[1].value,
							symbol:'none'
						},
						{
							name: '康家坝',
							type: 'line',
							stack: 'Total',
							data: res.data.data[2].value,
							symbol:'none'
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_yjzxll'));
				myChart.setOption(option);
			})
		},
		//爆管记录
		getBgjlData(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data27').then(res => {
				this.bgjlList = res.data;
			})
		},
		//水厂累计供水量
		initChart_scljgsl(){
			let option = {
				series: [
					{
						type: 'gauge',
						name:'江南水厂',
						startAngle: 180,
						endAngle: 0,
						center: ['25%', '80%'],
						radius: '110%',
						min: 0,
						max: 1,
						splitNumber: 10,
						axisLine: {
							lineStyle: {
							width: 3,
							color: [
									[0.3, 'rgba(255, 214, 0, 1)'],
									[0.6, 'rgba(8, 238, 100, 1)'],
									[1, 'rgba(244, 14, 14, 1)'],
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '18%',
							width: 10,
							offsetCenter: [0, '-45%'],
							itemStyle: {
							color: 'auto'
							}
						},
						axisTick: {
							length: 5,
							lineStyle: {
							color: 'auto',
							width: 1
							},
							splitNumber:10
						},
						splitLine: {
							length: 10,
							lineStyle: {
							color: 'auto',
							width:1
							}
						},
						axisLabel: {
							show:false,
						},
						title: {
							offsetCenter: [0, '-5%'],
							fontSize: 14,
							color:'rgba(255,255,255,0.6)'
						},
						detail: {
							fontSize: 18,
							offsetCenter: [0, '-25%'],
							color: 'auto'
						},
						data: [
							{
							value: 0.32,
							name: 'dm³'
							}
						]
					},
					{
						type: 'gauge',
						name:'江北水厂',
						startAngle: 180,
						endAngle: 0,
						center: ['72%', '80%'],
						radius: '110%',
						min: 0,
						max: 1,
						splitNumber: 10,
						axisLine: {
							lineStyle: {
							width: 3,
							color: [
									[0.3, 'rgba(255, 214, 0, 1)'],
									[0.6, 'rgba(8, 238, 100, 1)'],
									[1, 'rgba(244, 14, 14, 1)']
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '18%',
							width: 10,
							offsetCenter: [0, '-45%'],
							itemStyle: {
							color: 'auto'
							}
						},
						axisTick: {
							length: 5,
							lineStyle: {
							color: 'auto',
							width: 1
							},
							splitNumber:10
						},
						splitLine: {
							length: 10,
							lineStyle: {
							color: 'auto',
							width:1
							}
						},
						axisLabel: {
							show:false,
						},
						title: {
							offsetCenter: [0, '-5%'],
							fontSize: 14,
							color:'rgba(255,255,255,0.6)'
						},
						detail: {
							fontSize: 18,
							offsetCenter: [0, '-25%'],
							color: 'auto'
						},
						data: [
							{
							value: 0.32,
							name: 'dm³'
							}
						]
					}
				]
				};
			var myChart_jb = this.$echarts.init(document.getElementById('chart_drljgsl'));
			myChart_jb.setOption(option);
		}
	}
	
}
</script>
<style lang="less" scoped>

ul {
	padding: 0;
	margin: 0;
}

li {
	list-style: none;
}

#loosControl {
	position: relative;
	height: 100%;
	min-width: 1920px;	
    #map{
		/deep/.amap-maps{
				.amap-info{
                    height: auto;
					.amap-info-content{
						padding:0px;		
						width: 100%;
						background-color: transparent;
						overflow: hidden;
						.infoWindow{
							width:100%;
							height:100%;
							background: url('~@/assets/image/infowindow_bg.png') no-repeat;
							.top{
								width:100%;
								height:48px;							
								.title{
									font-family: 'Source Han Sans CN';
									font-style: normal;
									font-weight: 500;
									font-size: 18px;
									line-height: 48px;
									color: #B0E7FF;
									padding-left: 15px;
								}
							}
							.content{
                                padding: 20px;
								.info{
									.info_decs{
										font-size: 14px;
										color: #fff;
										line-height: 20px;
										li{
											margin-bottom: 20px;
											.label{
												color:#54B8F8;
											}
										}									
									}
								}
							}
						}
						.amap-info-close{
							right: 17px;
							top: 8px;
							width: 32px;
							height: 32px;
							color: transparent;
							background: url('~@/assets/image/infowindow_close.png');
						}
					}
				}
				
			}
	}
	.ssdqgk_panel{
		/deep/.title_text {
			background: url('~@/assets/image/lossCtrol/title/dqgk.png') no-repeat 20px 9px;
		}
		/deep/.panel_main{
			display: flex;
			#chart_ssdqgk{
				// width:350px !important;				
				// width:160px;
				flex-grow: 1;
				height: 100%;
			}
			.statis_item{
					margin-top:10px;
					width:90px;
					.label{
						font-size: 14px;
						line-height: 21px;
						color: rgba(255, 255, 255, 0.7);
						display: block;						
						text-align: center;
					}
					.num{
						font-weight: 700;
						font-size: 18px;
						line-height: 22px;
						color: #029AFA;
						display: inline-block;
						width:100%;
						text-align: center;
					}
				}
		}
		
	}
	.sslsl_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/lsl.png') no-repeat 20px 9px;
		}
		// #chart_sslsl{
		// 	width:450px;
		// 	height: 100%;
		// }
	}
	.sscxc_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/cxc.png') no-repeat 20px 9px;
		}
	}
	.dqystj_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/dqystj.png') no-repeat 20px 9px;
		}
		#chart_dqystj1{
			// width: 450px;			
			width: 100%;
			height: 102px;
			margin-top: 10px;
		}
		#chart_dqystj2{
			// width: 450px;
			width: 100%;
			height: 102px;
			margin-top: 10px;
		}
	}
	.drljgsl_panel{
		position: relative;
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/scrljgs.png') no-repeat 20px 9px;
		}
		.title_chart{
			position: absolute;
			bottom: 0px;
			display: flex;
			justify-content: space-around;
			width: 100%;
			span{
				display: inline-block;
				background: url('~@/assets/image/k.png');
				font-size: 14px;
				color: rgba(255, 255, 255, 0.7);
				width: 100p;
				width: 94px;
				height: 24px;
				text-align: center;
				line-height: 24px;
			}
		}
	}
	.fsgsl_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/scfsgs.png') no-repeat 20px 9px;
		}
	}
	.yjzxll_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/yjzxll.png') no-repeat 20px 9px;
		}
	}
	.bgjl_panel{
		/deep/ .title_text{
			background: url('~@/assets/image/lossCtrol/title/bgjl.png') no-repeat 20px 9px;
		}
		
	}
	.top_info{
		position: absolute;
		top: 117px;
		width: 100%;
		display: flex;
		justify-content: center;
		.item{
			display: flex;
			// width:180px;
			background-color: rgba(10, 38, 54, 0.7);
			padding: 10px;
			align-items: center;
			img{
				width:62px;
				height:62px;
				background-size: 100% 100%;
			}
			.content{
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex:none;
				padding:0px 10px;
				span{
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 33px;
					color: rgba(255, 255, 255, 0.8);
				}
				.num{
					font-family: 'DIN Next LT Pro';
					font-style: normal;
					font-weight: 700;
					font-size: 28px;
					line-height: 34px;
					color: #0CAFC6;
				}
			}
		}
	}	
	
	.bar_right{		
		width: 208px;
	}
	.bar_right{
		.bar_wrap{
			border-bottom: 0.4px solid rgba(255, 255, 255, 0.15);
			.bar_item{
				position: relative;
				display: flex;
				align-content: space-between;
				height: 42px;
				line-height: 42px;
				padding: 0 15px;
				font-family: 'Inter';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				.left_label{
					color: rgba(255, 255, 255, 0.7);
					flex: 1;
						img{
						vertical-align: middle;
					}
					.bar_label{
						padding-left: 3px;
					}
				}
				.right_opt{
					color: #FFFFFF;
					.el-switch{
						width: 28px;
						height: 14px;
					/deep/.el-switch__core{
						border: none;
					}
					/deep/.el-switch__core:after{
						width:13px;
						top: 2px;
					}
				}
			}
			
			
		}
		}
		
	}
	
	
	.el-date-editor{
		position: absolute;
		top: 5px;
		right: 0;
		width: 115px;
		/deep/.el-input__inner{
			height: 24px;
			padding-left: 10px;
			background: linear-gradient(180deg, rgba(123, 205, 252, 0) 0%, rgba(123, 205, 252, 0.2) 100%);
			border: 1px solid #003A52;
			color: #FFFF;
			border-radius: 0px;
		}
		/deep/.el-input__prefix{
			right: 0px;
			text-align: right;
			.el-input__icon{
				line-height: 26px;
			}
		}
		/deep/.el-input__suffix{
			display: none;
		}
		.el-input--prefix .el-input__inner{
			padding-left: 0;
		}
	}

	.selectGW{
        position: absolute;
        right: 503px;
        top: 300px;
		.select_wrap{
			width: 178px;
			height: 24px;
			background: linear-gradient(90deg, rgba(123, 205, 252, 0.1) -42.55%, rgba(123, 205, 252, 0.2) 96.15%);
			border-radius: 2px;
			// transform: matrix(-1, 0, 0, 1, 0, 0);
			display:flex;
			margin-bottom: 15px;
			border: 1px solid rgba(12, 175, 198, .6);
			.label{
				display: inline-block;
				width: 60px;
				color: rgba(255, 255, 255, 0.6);
				padding: 2px 5px;
			}	
			.el-select {
				width:120px;
				height:24px;

				/deep/.el-input {
					input::-webkit-input-placeholder {
						/* WebKit browsers */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-moz-placeholder {
						/* Mozilla Firefox 4 to 18 */
						color: rgba(255, 255, 255, 0.6);
					}

					input::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-ms-input-placeholder {
						/* Internet Explorer 10+ */
						color: rgba(255, 255, 255, 0.6);
					}

					.el-input__inner {
						height:24px;
						// border: 1px solid #235A8D;
						border: none;
						// border-radius: 4px;
						// background: rgba(35, 90, 141, 0.6);
						// color: rgba(255, 255, 255, 0.6);
						color: #FFFFFF;
						background-color: transparent;
						border-radius: 0;
						padding-left: 0;
					}

					.el-select__caret {
						color: rgba(255, 255, 255, 0.6);
						line-height: 24px;
					}
				}
			}
		}
	}
	
    // @media screen and (min-width:1024px) {
    //     .reFreshLaking{
    //         position: absolute;
    //         right: 540px;
    //         bottom: 120px;
    //         width: 124px;
    //         height: 124px;
    //         border-radius: 50%;
    //         background-image: url('~@/assets/image/lsfx.png');
    //         background-size: 100% 100%;
    //     }
    // }
    .reFreshLaking{
            position: absolute;
            left: 450px;
            top: 149px;
            width: 124px;
            height: 124px;
            cursor: pointer;
            border-radius: 50%;
            background-image: url('~@/assets/image/lsfx.png');
            background-size: 100% 100%;
            .value{
                display: inline-block;
                height: 100%;
                padding-left: 39px;
                // width: 100%;
                // text-align: center;
                line-height: 151px;
                color: #ffff;
            }
        }
	.equipments_status{
		position:absolute;
		width: 100%;
		height:25px;
		display: flex;		
		bottom:109px;
		line-height: 25px;
    	justify-content: center;
		font-size:14px;
		color:#FFFFFF;
		text-align: center;
		.label{
			width:85px;
			background: linear-gradient(180deg, rgba(123, 205, 252, 0) 0%, rgba(123, 205, 252, 0.2) 100%);
		}
		.item{
			width:56px;
			border-radius: 2px;
			margin:0 8px;
		}
		.normal{
			background: rgba(11, 206, 89, 0.3);
			border: 1px solid #0BCE59;
		}
		.unnormal{
			background: rgba(226, 17, 17, 0.3);
			border: 1px solid #E21111;
		}
		.offline{
			background: rgba(231, 168, 8, 0.3);
			border: 1px solid #E7A808;		
		}
	}	
}
</style>
<style lang="less" scoped>
    .my_table{
		width:100%;
		height:100%;
		overflow: hidden;
		.list_title,.list_row{
						display: flex;
						justify-items: sp;
						width: 100%;
						justify-content: space-between;	
						margin-bottom: 8px;						
					}	
					.list_row{
						background: linear-gradient(360deg, rgba(191, 191, 191, 0.15) 0%, rgba(191, 191, 191, 0) 114.77%);					
						font-size: 12px;
					}
					.list_title{
						background-color: rgb(10 38 54);
					}
					.list_item{
						width: 50px;
					}
					.title_dt{
						width:180px !important;
					}	
					.list_row{
						.list_item{
							color:rgba(255, 255, 255, 0.6);
						}
					}
					.title_item,.list_item{
						height: 44px;
						line-height: 44px;
						text-align: center;
						color: #FFFFFF;
						width: 50px;
					}
					
					.list_row:hover{
						background: url('~@/assets/image/bg_row.png');
						background-size: 100% 100%;
					}
	}
</style>